<template>
  <div class="header-nav">
    <div class="logo">
      <img class="logo-img" src="../assets/img/login/logo.png" alt="" />
      <h1>河北省流域地表水管控平台</h1>
    </div>
    <div class="menu-nav">
      <el-menu :default-active="activeIndex" class="el-menu-nav" mode="horizontal" @select="handleSelect">
        <template v-for="item in menuList">
          <!-- 二级菜单 -->
          <el-submenu v-if="item.menuType == 1 && item.children && item.children.length" :key="item.id" :index="item.id"
            :popper-append-to-body="false" popper-class="menu-popper sub-item">
            <template slot="title">
              <i :class="item.icon" v-if="item.icon" style="font-size: 22px;color:#fff"></i>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="subItem in item.children">
              <!-- 三级菜单 -->
              <el-submenu v-if="subItem == 1 && subItem.children && subItem.children.length" :key="subItem.id" :index="subItem.id"
                :popper-append-to-body="false" popper-class="menu-popper">
                <template slot="title">
                  <!-- <i :class="subItem.icon" v-if="subItem.icon" style="font-size: 22px;color:#fff"></i> -->
                  <span>{{ subItem.name }}</span>
                </template>
                <el-menu-item v-for="threeItem in subItem.children" :key="threeItem.id" :index="threeItem.id"
                  @click="goToPage(threeItem)">
                  {{ threeItem.name }}
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="subItem.id" @click="goToPage(subItem)" :key="subItem.id">
                {{ subItem.name }}
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item v-else :index="item.id" @click="goToPage(item)" :key="item.id">
            <i :class="item.icon" v-if="item.icon" style="font-size: 22px;color:#fff"></i>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <el-menu class="el-menu-user" mode="horizontal">
      <el-submenu index="2" class="submenu" :popper-append-to-body="false" popper-class="menu-popper">
        <template slot="title">
          <img width="25" src="../assets/img/index/user.svg" alt="" />
          <span>{{ user.realName }}</span>
        </template>
        <el-menu-item @click="backToPanel" index="2-1">回到面板</el-menu-item>
        <el-menu-item @click="editPassword" index="2-2">修改密码</el-menu-item>
        <el-menu-item @click="exit" index="2-3">重新登录</el-menu-item>
      </el-submenu>
    </el-menu>
    <password-dialog ref="passwordDialogRef" />
  </div>
</template>
<script>
import { mapState } from "vuex";
import passwordDialog from '../views/sys/user-manage/passwordDialog.vue';
import https from '@/api/http.js';
export default {
  components: { passwordDialog },
  name: "headerNav",
  data() {
    return {
      collapsed: true,
      user: {},
      activeIndex: "6-1",
      menuList: [],

      editableTabsValue: "2",
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 2,
    };
  },
  computed: {
    ...mapState(["tabsList"]),
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.user = JSON.parse(localStorage.getItem("userInfo"));
    console.log('this.user', this.user)
    if (!this.user || typeof (this.user) !== 'object') {
      this.$store.commit("logout", "false");
      this.$router.push({ path: "/login" });
      localStorage.setItem('authToken', '')
      localStorage.setItem('userInfo', '')
    }
    // console.log('this.user',localStorage.getItem("userInfo"))
  },
  mounted() {
    if (this.user && this.user.role.length) {
      this.getMenuListInit()
    }
  },
  methods: {
    getMenuListInit() {
      this.$api.getRoleMenuTree({ roleGuid: this.user.role[0].roleGuid }).then(res => {
        if (res && res.code == 200) {
          let data = res.data || []
          console.log('menuList', data)
          this.menuList = data.filter(l => l.menuType !=3)
        }
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 修改密码
    editPassword() {
      this.$refs.passwordDialogRef.showModal(this.user)
    },
    // 退出登录
    exit() {
      this.$confirm("退出并重新登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit("logout", "false");
            localStorage.setItem('authToken', '')
            localStorage.setItem('userInfo', '')
            window.open(this.$api.webAppUrl + "?logout=1" , "_self")
            // this.$router.push({ path: "/login" });
          }, 1000);
        })
        .catch(() => { });
    },
    backToPanel() {
      this.$confirm("回到面板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(this.$api.webAppUrl)
          window.open(this.$api.webAppUrl, "_self")
        })
        .catch(() => { });
    },
    // 切换显示
    toggle(showtype) {
      this.collapsed = !showtype;
      this.$root.Bus.$emit("toggle", this.collapsed);
    },
    goToPage(item) {
      console.log(item)
      if (!item.componentName) return;
      this.$router.push({
        name: item.componentName,
      });
    },

    addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "New Tab",
        name: newTabName,
        content: "New Tab content",
      });
      this.editableTabsValue = newTabName;
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>
<style scoped lang="less">
.header-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #026bad;
  height: 60px;

  .logo {
    color: #fff;
    display: flex;
    align-items: center;
    margin-left: 10px;

    h1 {
      margin: 0;
      float: left;
    }

    .logo-img {
      width: 50px;
      float: left;
      margin: 0 8px;
    }
  }

  .menu-nav {
    flex: 1;
    text-align: center;
    height: 60px;

    .el-menu-nav {
      display: inline-block;
    }
  }

  .el-menu-user {
    height: 60px;
  }
}
</style>
<style lang="less">
.header-nav {
  .el-menu {
    background: transparent;
    border: none;
  }

  .el-icon-arrow-down:before {
    content: "\e790";
  }

  .el-submenu__icon-arrow {
    font-size: 16px;
  }

  .el-menu--horizontal>.el-menu-item,
  .el-menu--horizontal>.el-submenu .el-submenu__title {
    font-size: 14px;
  }
  .el-menu-nav.el-menu--horizontal>.el-menu-item,
  .el-menu-user.el-menu--horizontal>.el-menu-item,
  .el-menu-nav.el-menu--horizontal>.el-submenu>.el-submenu__title,
  .el-menu-user.el-menu--horizontal>.el-submenu>.el-submenu__title{
    font-size: 16px;
  }
  .el-menu-nav.el-menu--horizontal>.el-submenu .el-submenu{
    width: 170px;
    margin: 0;
    &>.el-submenu__title:hover{
      background: #e0ebf2;
    }
  }

  .el-menu--horizontal>.el-menu-item,
  .el-menu--horizontal>.el-submenu .el-submenu__title,
  .el-submenu__title i,
  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: #fff;
    padding: 0;
  }

  .el-menu-user.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
  .el-menu-user.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu-user.el-menu--horizontal>.el-submenu>.el-submenu__title:hover,
  .el-menu-nav.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
  .el-menu-nav.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu-nav.el-menu--horizontal>.el-submenu>.el-submenu__title:hover {
    background: transparent;
  }

  .el-menu-user.el-menu--horizontal>.el-submenu.is-active>.el-submenu__title,
  .el-menu-user.el-menu--horizontal>.el-menu-item.is-active,
  .el-menu-user.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu-user.el-menu--horizontal>.el-submenu>.el-submenu__title:hover,
  .el-menu-nav.el-menu--horizontal>.el-submenu.is-active>.el-submenu__title,
  .el-menu-nav.el-menu--horizontal>.el-menu-item.is-active,
  .el-menu-nav.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu-nav.el-menu--horizontal>.el-submenu>.el-submenu__title:hover {
    border-bottom: 4px solid #deb23e !important;
  }

  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title,
  .el-menu--horizontal>.el-menu-item.is-active,
  .el-menu--horizontal>.el-submenu .el-submenu__title,
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
    border-bottom: none !important;
  }

  .el-menu--horizontal .el-menu .el-menu-item,
  .el-menu--horizontal .el-menu .el-submenu__title {
    color: #4c4c4c;
  }
  .el-menu--horizontal>.el-submenu ul{
    border-radius: 6px;
  }
  .el-menu--horizontal>.el-submenu ul>li:last-child{
    border-radius: 0 0 6px 6px;
    overflow: hidden;
  }
  .el-menu--horizontal>.el-submenu ul>li:first-child{
    border-radius: 6px 6px 0 0;
    overflow: hidden;
  }

  .el-menu--horizontal .el-menu>.el-menu-item.is-active,
  .el-menu--horizontal .el-menu>.el-submenu.is-active>.el-submenu__title {
    color: #026bad;
    background: #e0ebf2;
    text-align: center;
  }
  .el-menu-nav.el-menu--horizontal>.el-menu-item{
    padding: 0 20px!important;
  }
  .el-menu--popup,
  .el-submenu .el-menu-item {
    min-width: 170px;
    width: 170px;
  }

  .el-submenu {
    width: 170px;
    margin: 0 5px;
  }

  .menu-popper {
    text-align: center;


    .el-menu {
      background: #fff;
    }

    .el-menu--popup {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      padding: 0;

      i.el-icon-arrow-right {
        color: #4c4c4c;
        margin-left: 0;
      }
      li.el-submenu.is-active{
        margin: 0;
        .el-submenu__title {
          border: none !important;
          width: 170px;
        }
      }
      &:hover {
        color: #026bad;
        background: #e0ebf2;

        li.el-submenu {
          border: none !important;
        }

        &>.el-submenu__title {
          border: none !important;

          i.el-icon-arrow-right {
            color: #026bad;
          }
        }
      }

      li {
        width: 170px;

        .el-menu--popup {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
          padding: 0;
          overflow: hidden;
        }
      }
    }

    .el-menu-item:not(.is-disabled):hover {
      color: #026bad;
      background: #e0ebf2;
    }
  }

  .el-menu-user {
    .el-submenu .el-submenu__title{
      text-align: center;
    }
    .el-submenu.is-active .el-submenu__title,
    .el-menu-item.is-active {
      border-bottom: none;
    }

    .menu-popper {

      .el-menu-item.is-active {
        color: #4c4c4c;
        background: #fff;
      }
    }
  }
}
</style>
